var web = document.getElementsByClassName("web")[0],
	fieldbox = document.getElementsByClassName("fieldbox")[0],
	loadingbox = document.getElementsByClassName("loadingbox")[0],
	chooseSeat = document.getElementsByClassName("chooseSeat")[0],
	closePopup1 = document.getElementsByClassName("closePopup")[0],
	shareLogo = web.getElementsByClassName("shareLogo")[0],
	sharebox = document.getElementsByClassName("sharebox")[0],
	shareText = sharebox.getElementsByTagName("p")[0],
	closePopup2 = sharebox.getElementsByClassName("closePopup")[0],
	musicLogo = fieldbox.getElementsByClassName("musicLogo")[0],
	audioBtn = musicLogo.getElementsByTagName("audio")[0],
	tableArea=fieldbox.getElementsByClassName("tableArea")[0],
	hostTable = fieldbox.getElementsByClassName("hostTable")[0],
	guestTable = fieldbox.getElementsByClassName("guestTable"),
	guestArea = fieldbox.getElementsByClassName("guestArea")[0],
	tables = guestArea.getElementsByClassName("table"),
	imgs = guestArea.getElementsByTagName("img"),
	judge = true,
	n = 0;

for(var q = 0; q < tables.length - 1; q++) {
	var p = tables[q].getElementsByTagName("p")[0];
	p.innerText = "第" + (q + 1) + "席";
}
//添加图片
for(var i = 0; i < imgs.length; i++) {
	var rand = Math.floor(Math.random() * 20 + 1);
	imgs[i].src = "img/" + rand + ".jpg";
}

//载入弹窗
chooseSeat.addEventListener("click", function() {
	loadingbox.style.display = "none";
})
closePopup1.addEventListener("click", function() {
	loadingbox.style.display = "none";
})

//分享按钮
shareLogo.addEventListener("click", function() {
	sharebox.style.display = "block";
	shareText.innerText = "为Ta收集更多新婚祝福";
})
closePopup2.addEventListener("click", function() {
	sharebox.style.display = "none";
	event.stopPropagation();
})

//背景音乐按钮
musicLogo.addEventListener("click", function() {
	judge = !judge;
	if(judge) {
		musicLogo.style.animationPlayState = "running";
		audioBtn.play();
	} else {
		musicLogo.style.animationPlayState = "paused";
		audioBtn.pause();
	}
})

//点击选座
var chooseSeat = function(ppx) {
	var obj = ppx.parentNode;
	obj.style.zIndex=10;
	event.stopPropagation();
	var guestTable = fieldbox.getElementsByClassName("guestTable");
	//其他桌子被隐藏
	hostTable.style.opacity = 0;
	for(var i = 0; i < guestTable.length; i++) {
		guestTable[i].style.opacity = 0;
	}
	obj.style.opacity = 1;
	//将点击对象位移至屏幕中间
	var y = document.documentElement.clientHeight, //获取可视区域宽度
		x = document.documentElement.clientWidth;
	obj.style.transform = "translateY(" + (-obj.offsetTop + y * 0.5 - obj.offsetHeight * 0.5) + "px) translateX(" + (-obj.offsetLeft + x * 0.5 - obj.offsetWidth * 0.5) + "px) scale(2)";

	//宾客区不可滑动
	tableArea.style.overflow = "hidden";

	//点击使页面复原
	web.addEventListener("click", function() {
		obj.style.transform = "scale(1)";
		hostTable.style.opacity = 1;
		tableArea.style.overflow = "auto";
		for(var j = 0; j < guestTable.length; j++) {
			guestTable[j].style.opacity = 1;
			guestTable[j].style.display = "inline-block";
		}
		for(var k = 0; k < chairs.length; k++) {
			chairs[k].setAttribute("onclick", "");
			chairs[k].style.animationName = "noJump";
		}
	})
	//给椅子添加点击事件
	var chairs = obj.getElementsByClassName("chair");
	for(var k = 0; k < chairs.length; k++) {
		var img = chairs[k].getElementsByTagName("img")[0];
		if(img) {
			chairs[k].style.animationName = "noJump";
		} else {
			chairs[k].style.animationName = "chairsJump";
		}
		chairs[k].setAttribute("onclick", "funcOne(this)");
	}
}

//点击椅子选择座位
var funcOne = function(j) {
	event.stopPropagation();
	j.style.animationName = "noJump";
	var img = j.getElementsByTagName("img")[0],
		i = j.getElementsByTagName("i")[0],
		guestTable = fieldbox.getElementsByClassName("guestTable");
	if(img) {
		sharebox.style.display = "block";
		shareText.innerText = "这个座位上有人啦";
	} else {
		sharebox.style.display = "block";
		shareText.innerText = "您已选择" + (guestTable.length - 1) + "席" + (n + 1) + "座";
		j.innerHTML = "<img src=img/" + (100 + n) + ".jpg>"
		n++;
	}
}

//增加客桌
var m = 0,
	lastTable = fieldbox.getElementsByClassName("lastTable");
var addSeat = function(obj) {
	var blankChairs = guestArea.getElementsByClassName("icon-wo"),
		lastTable = fieldbox.getElementsByClassName("lastTable");
	if(blankChairs.length > 12) {
		sharebox.style.display = "block";
		shareText.innerText = "还有很多空位置哦!";
	} else {
		guestArea.innerHTML += '<div class="guestTable lastTable"><div class="table" onclick="addSeat(this)"><p><i class="iconfont icon-jiahao"></i></p></div><div class="chair"><i class="iconfont icon-wo"></i></div><div class="chair"><i class="iconfont icon-wo"></i></div><div class="chair"><i class="iconfont icon-wo"></i></div><div class="chair"><i class="iconfont icon-wo"></i></div><div class="chair"><i class="iconfont icon-wo"></i></div><div class="chair"><i class="iconfont icon-wo"></i></div></div>';
		var chairs = lastTable[m].getElementsByClassName("chair");
		for(var i = 0; i < chairs.length; i++) {
			chairs[i].style.opacity = "1";
		}
		lastTable[m].getElementsByClassName("table")[0].setAttribute("onclick", "chooseSeat(this)");
		m = m + 1;
	}
	for(var q = 0; q < tables.length - 1; q++) {
		var p = tables[q].getElementsByTagName("p")[0];
		p.innerText = "第" + (q + 1) + "席";
	}
}